<template>
  <div class="menuList">
    <svg-icon icon-class="logo" class="logo"></svg-icon>
    <div class="phone">
      <svg-icon icon-class="phone" class-name="contact-svg"></svg-icon>4008-050-721
    </div>
    <ul>
      <li v-for="item in menuList" :key="item.id" v-bind:class="{ active: item.isActive }">
        <router-link :to="{path:item.url}">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  computed: {
    menuList() {
      let arr = [];
      this.list.forEach(item => {
        item.isActive = this.$route.path == item.url ? true : false;
        arr.push(item);
      });

      return arr;
    }
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "首页",
          url: "/"
        },
        {
          id: 2,
          name: "解决方案",
          url: "/solve"
        },
        {
          id: 3,
          name: "建设内容",
          url: "/construction"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
ul {
  float: right;

  li {
    float: left;
    font: 300 16px / 40px '微软雅黑';
    color: #fff;
    padding: 0 8px;

    & /deep/ a {
      color: #ffffff;
    }

    &.active, &:hover {
      font-weight: 600;
    }
  }
}

.menuList {
  .phone {
    float: right;
    font: 300 16px / 40px '微软雅黑';
    padding: 0 8px;
    color: #fff;
    margin-left: 88px;
    .contact-svg {
      margin-right: 8px;
    }
  }

  .logo {
    width: 120px;
    height: 40px;
    float: left;
  }

  position: absolute;
  width: 1300px;
  left: 50%;
  top: 26px;
  margin-left: -650px;
  z-index: 10;
}
</style>